<template>
  <div id="order-apply-detail-box" v-if="detail && detail.id>0">
    <!--退货订单信息-->
    <div class="custom-table custom-table-2">
      <div class="row">
        <div class="left">类型:</div>
        <div class="right" v-text="detail.type.name"></div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">物流类型:</div>
        <div class="right" v-text="detail.expressType.name"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">状态:</div>
        <div class="right">
          <span v-text="detail.status.name"></span>
        </div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">退款金额:</div>
        <div class="right">
          <span class="price-font" v-text="'￥'+ToMoney(detail.money)"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">退款理由:</div>
        <div class="right" v-text="detail.reason"></div>
        <div class="c"></div>
      </div>

      <div class="row" v-if="detail.systemInfo">
        <div class="left">系统处理-状态:</div>
        <div class="right" v-text="detail.systemStatus.name"></div>
        <div class="c"></div>
      </div>
      <div class="row" v-if="detail.systemInfo">
        <div class="left">系统处理-回复:</div>
        <div class="right" v-text="detail.systemInfo"></div>
        <div class="c"></div>
      </div>

      <div class="row">
        <div class="left">店铺名称:</div>
        <div class="right">
          <span v-text="detail.shopName"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">创建时间:</div>
        <div class="right" v-text="detail.createdTime"></div>
        <div class="c"></div>
      </div>
      <div class="row" style="width: 100%;" v-if="detail.addressInfo && detail.addressInfo.id>0">
        <div class="left">收货-地址:</div>
        <div class="right">
          <div>
            <span v-text="detail.addressInfo.name"></span>,<span v-text="detail.addressInfo.mobile"></span>
          </div>
          <div v-text="detail.addressInfo.province+detail.addressInfo.city+detail.addressInfo.county+' '+detail.addressInfo.address"></div>
        </div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>

    <!--退货商品信息-->
    <div style="width: 1100px; margin: 0px auto;">
      <product-item :curr-product="{
        id:product.id,
        image:product.image,
        price:product.price,
        supplierProductStockId:product.supplierProductStockId,
        model:product.model,
        nums:product.applyNums,
      }" v-for="(product,index) in detail.productData" :key="index"/>
      <div class="c"></div>
    </div>

    <!--步骤状态-->
    <div align="center" style="margin: 10px auto; max-height: 480px; min-height: 200px; padding-top: 10px;">
      <el-timeline class="order-apply-timeline" style="width: 1000px; text-align: left;">
        <el-timeline-item
          v-for="(activity, index) in stepArr"
          :key="index"
          :icon="activity.isComplete===1?'el-icon-success':''"
          :color="activity.isComplete===1?'green':'#CCCCCC'"
          :timestamp="activity.createdAt">
          <div class="tag-name" v-text="activity.tagName"></div>
          <span v-if="!activity.content">-</span>
          <div class="content" v-if="activity.content" v-text="activity.content"></div>
        </el-timeline-item>
      </el-timeline>
    </div>

    <div align="center">
      <!--1.处理用户首次申请-->
      <el-button type="primary" v-if="detail.status.id===0" size="mini" @click="handlerSubmit">处理申请</el-button>
      <!--2.处理收到货物-->
      <el-button type="primary" v-if="detail.type.id!==2 && detail.status.id===2" size="mini" @click="handlerRecived">处理收货</el-button>
      <el-button type="primary" v-if="detail.type.id===1 && detail.status.id===3" size="mini" @click="submitExpress">提交退货单号</el-button>


    </div>

    <order-apply-handler-dialog :success-function="reloadParentDetail" ref="orderApplyHandlerDialog"/>
    <order-apply-submit-express-dialog :success-function="reloadParentDetail" ref="orderApplySubmitExpressDialog"/>

  </div>
</template>

<script>
import ProductItem from './ProductItem'
import OrderApplyHandlerDialog from '../Dialog/OrderApplyHandlerDialog'
import OrderApplySubmitExpressDialog from '../Dialog/OrderApplySubmitExpressDialog'
import ShowSystemApplyLogDialog from '../Dialog/ShowSystemApplyLogDialog'
export default {
  name: 'OrderApplyDetailBox',
  components: {ShowSystemApplyLogDialog, OrderApplySubmitExpressDialog, OrderApplyHandlerDialog, ProductItem},
  props:{
    detail:Object,
    reloadDetail:Function
  },
  data:function () {
    return {
      stepArr: [
        {
          tagName:'用户申请',
          content: '',
          createdAt: '2018-04-12 20:46',
        },
        {
          tagName:'商家同意',
          content: '',
          createdAt: '2018-04-03 20:46',
        },
        {
          tagName:'用户发货',
          content: '',
          createdAt: '2018-04-03 20:46',
        },
        {
          tagName:'商家收货',
          content: '',
          createdAt: '2022-10-4 23:47:24'
        }
      ],
      stepNameArr:dict.OrderApplyStepNameArr,
      logListMap:{},
    }
  },
  mounted () {
    // 获取日志列表
    let $this=this
    $this.initStepArr()
    $this.mergeLogList()
  },
  methods:{

    reloadParentDetail:function () {
      let $this=this
      if(typeof $this.$props.reloadDetail==='function'){
        $this.$props.reloadDetail()
      }
    },
    // 提交物流信息
    submitExpress:function () {
      let $this=this
      this.$refs.orderApplySubmitExpressDialog.open(this.detail.id)
    },
    // 处理请求
    handlerSubmit:function () {
      let $this=this
      this.$refs.orderApplyHandlerDialog.open(this.detail)
    },
    handlerRecived:function () {
      let $this=this
      this.$confirm('您确认要进行该操作吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.MyRequest(this.ApiDoNameSupplier+'SupplierOrderApply/received',{id:this.detail.id},function (data) {
          $this.$message.success('操作成功')
          if(typeof $this.$props.reloadDetail==='function'){
            $this.$props.reloadDetail()
          }
          $this.getDetail()
        })
      }).catch(() => {

      });
    },
    // 根据类型,初始化步骤数组
    initStepArr:function () {
      let $this=this
      // console.log('this.stepNameArr',this.stepNameArr)
      var arr=this.stepNameArr[this.$props.detail.type.id]
      var tmpArr=[]
      arr.forEach(function (name, index) {
        tmpArr.push({
          tagName:name,
          isComplete:0,
          content:'',
          createdAt:'',
        })
      })
      $this.stepArr=tmpArr
      if ($this.detail.logList.length){
        $this.detail.logList.forEach(function (value, index) {
          $this.logListMap[value.tagName]=value
        })
      }
      this.$forceUpdate()
    },
    // 合并日志
    mergeLogList:function () {
      let $this=this
      $this.stepArr.forEach(function (value, index) {
        var tmpItem=$this.logListMap[value.tagName]
        if (tmpItem){
          $this.stepArr[index].content=tmpItem.content
          $this.stepArr[index].isComplete=tmpItem.isComplete
          $this.stepArr[index].createdAt=tmpItem.createdAt
        }
      })
      $this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

</style>
